<template>
  <div 
    class="messagebox-container" 
    v-hijackJump
    @scroll="onScrollHandler"
  >
    <div v-if="msgList && msgList.length > 0">
      <!-- 消息列表 -->
      <div class="message-content">
        <div v-if="isShowMore" class="iconfont-wrap" @click="loadMoreMsgs">
          <i class="el-icon-refresh"></i>
          <span class="load-more">{{$t('common.base.tip.loadMoreMessage')}}</span>
        </div>
        <div v-else class="iconfont-wrap" >
          <template v-if="haveHistoryConversation">
            <div v-if="historyConversationMessage.length>0" class="iconfont-wrap" @click="loadMoreConversationClick">
              <i class="el-icon-refresh"></i>
              <span class="load-more">{{$t('im.imChat.components.messageBox.chattingRecords.des1')}}</span>
            </div>
            <span v-else class="load-more">{{$t('im.imChat.components.messageBox.chattingRecords.des2')}}</span>
          </template>
          <span v-else class="load-more">{{$t('im.imChat.components.messageBox.chattingRecords.des3')}}</span>
        </div>
        <div v-if="isWeChat" class="wechat-tip">
          1、{{$t('im.imChat.components.messageBox.chattingRecords.des4')}} <br />
          2、{{$t('im.imChat.components.messageBox.chattingRecords.des5')}}
        </div>
        <div
          v-for="(item, i) in msgList"
          :key="item.id"
          class="chat-content"
          :class="`item-${item.id}`"
        >
          <!-- 系统3 客户2 客服1 机器人0 -->
          <div
            v-if="item.sendType == 1 || item.sendType == 2 || item.sendType == 0"
            :class="[(item.sendType == 1 || item.sendType == 0) ? 'word-my' : 'word']"
          >
            <div class="info"
              @mouseenter="msgMouseenter(i,item)"
            >
              <!-- 头像 -->
              <Avatar :item="item" :isTourist="isTourist" mode="record" :size="30"/>
              <!-- 聊天记录内容区域start -->
              <div class="record-item-wrap">
                <!-- 名称 -->
                <div class="item-name" v-if="recordItemName(item) &&  mode=='chat'">{{ recordItemName(item) }}</div>
                <div class="item-content-row">
                  <!-- 图片 -->
                  <template
                    v-if="
                      item.messageType === 'image' ||
                      item.messageType === 'newImage'
                    "
                  >
                    <ImageMessage :item="item" />
                  </template>
                  <!-- 附件 -->
                  <template
                    v-else-if="
                      item.messageType === 'file' ||
                      item.messageType === 'newFile'
                    "
                  >
                    <FileMessage :item="item" />
                  </template>
                  <!-- 文本 -->
                  <template v-else-if="item.messageType === 'txt'">
                    <div
                      class="info-content info-content-txt"
                      v-html="replaceURLWithHTMLLinks(item.messageContent.msg)"
                    ></div>
                    
                    <!-- start AI来回答 -->
                    <div 
                      v-if="isShowAIAnswer(item)" 
                      class="message-ai-answer"
                    >
                      <div
                        class="message-ai-answer-button"
                        @click="onAIAnswerBarShow(i)"
                      >
                        <img :src="aiImg">
                        <span>
                          回答
                        </span>
                      </div>
                      <!-- <el-popover
                        popper-class="message-ai-answer-popper"
                        trigger="click"
                        placement="bottom-start"
                        :offset="0"
                        :width="popoverWidth"
                        :ref="'AIAnswerPopover' + i"
                        @show="onAIAnswerShow(i)"
                      >
                        <div
                          slot="reference"
                          class="message-ai-answer-button"
                          type="text"
                          size="mini"
                        >
                          AI来回答
                        </div>
                        
                        <div class="message-ai-answer-content">
                          <BizChatBar
                            :ref="'BizChatBar' + i"
                            @close="closeAllAIAnswerPopover"
                            @use="onUseBizChatBar"
                          >
                          </BizChatBar>
                        </div>
                        
                      </el-popover> -->
                    </div>
                    <!-- end AI来回答 -->
                    
                  </template>
                  <!-- 微信二维码 -->
                  <template v-else-if="item.messageType === 'imageCode'">
                    <div class="info-imageCode info-content">
                      <div class="info-text">
                        {{ item.messageContent.customExts.codeTxt }}
                      </div>
                      <img
                        :src="item.messageContent.customExts.imageUrl"
                        class="info-image"
                        alt=""
                        @click="
                          imgCodePreview(item.messageContent.customExts.imageUrl)
                        "
                      />
                    </div>
                  </template>
                  <!-- 机器人回复 -->
                  <template v-else-if="item.messageType === 'robotMessage'">
                    <div class="info-content">
                      <RobotMessage :info="item" />
                    </div>
                  </template>
                  <!-- 语音消息 -->
                  <template
                    v-else-if="
                      item.messageType === 'voice' ||
                      item.messageType === 'newVoice'
                    "
                  >
                    <div class="info-content">
                      <AudioMessage
                        :message-info="item"
                        :voice-info="item"
                        :send-type="item.sendType"
                      ></AudioMessage>
                    </div>
                  </template>
                  <!-- product产品消息类型 -->
                  <template v-else-if="item.messageType === 'product'">
                    <ProductMessage
                      :conversation-number="conversationNumber"
                      :message-info="item"
                      :product-info="item.messageContent.customExts"
                      :operational-data="operationalData"
                    />
                  </template>
                  <!-- WikiMessage知识库分享消息类型 -->
                  <template v-else-if="item.messageType === 'wikiShare'">
                    <WikiMessage
                      :hx-id-obj="hxIdObj"
                      :wiki-info="item.messageContent.customExts"
                    />
                  </template>
                  <!-- inviteTouristLogin邀请客户登录消息 -->
                  <template v-else-if="item.messageType === 'inviteTouristLogin'">
                    <TouristLoginPhoneMessage :user-detail="userDetail" />
                  </template>
                  <!-- serviceMallOrder 服务商城订单详情 -->
                  <template v-else-if="item.messageType === 'serviceMallOrder'">
                    <OrderDetailsMessage :item="item" />
                  </template>
                  <!-- serviceMallGoods 服务商城订单详情 -->
                  <template v-else-if="item.messageType === 'serviceMallGoods'">
                    <GoodsDetailsMessage :item="item" />
                  </template>
                  <!-- 富文本 -->
                  <template v-else-if="item.messageType === 'paragraph'">
                    <ParagraphMessage :item="item" />
                  </template>
                  <!-- 邮件 -->
                  <template v-else-if="item.messageType === 'email'">
                    <MailMessage :item="item" :mode="mode" />
                  </template>
                  <!-- 聊天记录内容区域end -->
                  <!-- 已读状态 微信客服隐藏 -->
                  <div v-if="item.sendType == 1 && isIm" class="info-status">
                    {{ item.status | formatStatus }}
                  </div>
                  <!-- 更多操作 -->
                  <div class="more-edit" v-if="item.moreEdit && mode=='chat' && (isIm || isWeChat)">
                    <MoreEdit :item="item" :idx="i" />
                  </div>
                </div>
              </div>
            </div>
            <div class="info-time" v-if="isIm || isWeChat">
              {{ item.createTime | InitializationTime | formatDate }}
            </div>
          </div>
          
          <!-- start 系统级别消息 -->
          <template v-if="item.sendType == 3">
            <SystemMessage :item="item"/>
          </template>
          <!-- end 系统基本消息 -->
          
          <!-- start AI回答 -->
          <div 
            class="message-item-ai-answer-bar"
            v-if="isShowAIAnswerBar(item)"
          >
            <BizChatBar
              :ref="'BizChatBar' + i"
              @close="closeAllAIAnswerBar"
              @use="onUseBizChatBar"
              @send="onSendBizChatBar"
              @loading="onBizChatBarLoadingHandler"
            >
            </BizChatBar>
          </div>
          <!-- end AI回答 -->
          
        </div>
      </div>
    </div>
    <!-- 缺省图 -->
    <div v-else class="default">
      <no-data-view-new ></no-data-view-new>
    </div>
  </div>
</template>

<script>
// vue
import EventBus from '@src/util/eventBus';
import AudioMessage from './components/AudioMessage.vue';
import ProductMessage from './components/ProductMessage.vue';
import WikiMessage from './components/WikiMessage.vue';
import TouristLoginPhoneMessage from './components/TouristLoginPhoneMessage.vue';
import ImageMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/ImageMessage.vue';
import FileMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/FileMessage.vue';
import RobotMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/RobotMessage.vue';
import ParagraphMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/ParagraphMessage/index.js'
import MoreEdit from '@src/modules/im/imChat/components/messageBox/MoreEdit.vue'
import SystemMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/SystemMessage.vue'
import Avatar from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/Avatar.vue'
import OrderDetailsMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/OrderDetailsMessage.vue';
import GoodsDetailsMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/GoodsDetailsMessage.vue';
import NoDataViewNew from '@src/component/common/NoDataViewNew';
import MailMessage from '@src/modules/im/imChat/components/messageBox/chattingRecords/components/MailMessage.vue';
import BizChatBar from '@src/component/business/BizChatBar'
// mixins
import ChatMixin from '../../../../ChatMixin/index';
// util
import { formatDate } from 'pub-bbx-utils';
import { mapState } from 'vuex';
import { safeNewDate } from '@src/util/time';
import { replaceURLWithHTMLLinks } from '@src/modules/im/imChat/utils/tools.js'
import { getRootWindow } from '@src/util/dom'
import { convertIMMessageListToAIMessageList } from '@src/modules/im/imChat/utils'
/** api */
import { getCustomerHistoryConversation } from 'src/api/ImApi.js'
/** directives */
import { hijackJump } from '@src/modules/im/tools/directives.js'
import { isObject, isArray } from '@src/util/type';
import _, { isEmpty } from 'lodash';
import { getLocalesCommonOssUrl } from '@src/util/assets';

import AILogo from '@src/assets/svg/ai.svg';

const aiImg = getLocalesCommonOssUrl('/ai/ai.png');

export default {
  name: 'chatting-records',
  mixins: [ChatMixin],
  directives:{
    hijackJump,
  },
  props: {
    msgList: {
      type: Array,
      default: () => [],
    },
    isShowMore: {
      type: Boolean,
      default: false,
    },
    source: {
      type: String,
      default: '',
    },
    conversationNumber: {
      type: String,
      default: '',
    },
    conversationId: {
      type: [String, Number],
      default: '',
    },
    hxIdObj: {
      type: Object,
    },
    userDetail:{
      type:Object,
      default:()=>({})
    },
    mode:{
      type:String,
      default:''
    },
    clientName: {
      type: String,
      default: '',
    },
    aiRobotId: {
      type: [String, Number],
      default: '',
    },
    aiRobotAppId: {
      type: [String, Number],
      default: '',
    },
    isAutoAIReply: {
      type: Boolean,
      default: false,
    }
  },
  components: {
    Avatar,
    AudioMessage,
    ProductMessage,
    WikiMessage,
    TouristLoginPhoneMessage,
    ImageMessage,
    FileMessage,
    RobotMessage,
    ParagraphMessage,
    MoreEdit,
    SystemMessage,
    OrderDetailsMessage,
    GoodsDetailsMessage,
    NoDataViewNew,
    MailMessage,
    BizChatBar
  },
  data() {
    return {
      previewFile: {},
      isAIAnswerLoading: false,
      historyConversationMessage: [],
      isSameConversation: true,
      AILogo,
      aiImg,
      currentAIAnswerIndex: null
    };
  },
  computed: {
    ...mapState(['operationalData']),
    isWeChat() {
      return this.source == 'weChat';
    },
    isIm() {
      return this.source == 'im';
    },
    isTourist() {
      return this.userDetail?.registerType === 4;
    },
    haveHistoryConversation() {
      // 是否有历史会话
      return this.userDetail?.haveHistoryConversation ?? false
    },
    /** 
     * @description 是否有 AI 的灰度
    */
    isHaveAIGray() {
      const RootWindow = getRootWindow(window)
      return Boolean(RootWindow?.grayAuth?.chat_GPT)
    },
    clientWidth() {
      const minWidth = 300
      return this.$el?.clientWidth || minWidth
    },
    popoverWidth() {
      return this.clientWidth - 40
    },
    popoverStyle() {
      return {
        width: this.clientWidth + 'px',
      }
    },
  },
  watch:{
    haveHistoryConversation(val){
      if(val){
        this.getHistoryConversationMessage()
      }else{
        this.historyConversationMessage = []
      }
    },
    conversationId(val, oldValue) {
      
      console.log('conversationId', val, oldValue)
      
      if (val && oldValue) {
        this.isSameConversation = (val == oldValue)
      }
      
      console.log('isSameConversation', this.isSameConversation)
      
    },
    msgList(newValue, oldValue) {
      // this.$nextTick(() => {
      //   this.watchMsgListHandler(newValue, oldValue);
      // });
    }
  },
  mounted() {
    EventBus.$on('pushNewMessage', this.newMessageHandler);
  },
  beforeDestroy() {
    EventBus.$off('pushNewMessage', this.newMessageHandler);
  },
  methods: {
    newMessageHandler() {
      console.log('newMessageHandler')
      setTimeout(() => {
        this.watchMsgListAIAutoReply(this.msgList, this.msgList)
      }, 100);
    },
    isShowAIAnswer(messageItem) {
      const isHaveRobotAndRobotApp = this.aiRobotId && this.aiRobotAppId;
      return messageItem.sendType === 2 && this.isHaveAIGray && isHaveRobotAndRobotApp;
    },
    isShowAIAnswerBar(messageItem) {
      return Boolean(messageItem?.showAIAnswerBar)
    },
    recordItemName(item) {
      return item.sendType === 2
        ? this.clientName
        : item.sendType === 1
        ? item.customerServiceName
        : "";
    },
    replaceURLWithHTMLLinks,
    loadMoreMsgs() {
      this.$emit('loadMoreMsgs');
    },
    imgCodePreview(url) {
      this.$previewElementImg(url);
    },
    msgMouseenter(i,item){
      if(![1].includes(item.sendType)) return
      if(item.isHistoryConversation) return
      EventBus.$emit('updatedMsgList',{type:'editMoreEdit',idx:i,val:true})
    },
    async getHistoryConversationMessage(){
      try{
        const {code,data} = await getCustomerHistoryConversation({currentConversationId:this.hxIdObj.conversationId})
        if(code==0){
          this.historyConversationMessage = data
        }else{
          this.historyConversationMessage = []
        }
      }catch(err){
        this.historyConversationMessage = []
      }
    },
    loadMoreConversationClick(){
      let lastIndex = this.historyConversationMessage.length - 1
      let messageInfoList = this.historyConversationMessage[lastIndex]?.messageInfoList ?? []
      messageInfoList.map(v=>{v.isHistoryConversation = true})
      this.historyConversationMessage.splice(lastIndex,1)
      EventBus.$emit('updatedMsgList',{type:'addConversationMessage',val:messageInfoList})
    },
    onAIAnswerShow(index) {
      try {
        // 关闭其他的AI回答弹窗
        this.closeAllAIAnswerPopover()
        // 清除其他的AI回答请求
        this.closeAllAIAnswerRequest()
      } catch (error) {
        console.error(error)
      }
      // 显示当前AI回答弹窗
      this.showAIAnswerPopover(index)
      // 获取当前AI回答聊天框
      this.showBizChatBar(index)
    },
    scrollToCurrentAIAnswer(index) {
      const item = this.msgList[index]
      const id = item.id
      const element = document.querySelector(`.item-${id}`)
      if (element) {
        element.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        })
      }
    },
    showBizChatBar(index) {
      
      const refName = 'BizChatBar' + index
      const chatBar = this.$refs[refName]
      
      // 只显示到 index 的消息
      const prevMessageList = this.msgList.slice(0, index + 1)
      const messageList = convertIMMessageListToAIMessageList(prevMessageList)
      
      const currentMessage = this.msgList[index] || {}
      const messageId = currentMessage?.id
      
      // 显示当前AI回答弹窗
      if (isObject(chatBar)) {
        chatBar.show(this.aiRobotId, this.aiRobotAppId, messageList, this.conversationId, messageId)
      }
      // 显示当前AI回答弹窗
      if (isArray(chatBar)) {
        chatBar.forEach(item => {
          item.show(this.aiRobotId, this.aiRobotAppId, messageList, this.conversationId, messageId)
        })
      }
    },
    showAIAnswerPopover(index) {
      const refName = 'AIAnswerPopover' + index
      const popover = this.$refs[refName]
      
      if (isObject(popover)) {
        popover.doShow()
      }
      
      if (isArray(popover)) {
        popover.forEach(item => {
          item.doShow()
        })
      }
      
    },
    closeAllAIAnswerRequest() {
      this.msgList.forEach((item, index) => {
        
        const refName = 'BizChatBar' + index
        const chatBar = this.$refs[refName]
        
        if (isObject(chatBar)) {
          chatBar.outsideOnStopHandler()
        }
        
        if (isArray(chatBar)) {
          chatBar.forEach(item => {
            item.outsideOnStopHandler()
          })
        }
        
      })
    },
    closeAllAIAnswerPopover() {
      for (let i = 0; i < this.msgList.length; i++) {
        
        const refName = 'AIAnswerPopover' + i;
        const popover = this.$refs[refName];
        
        if (isObject(popover)) {
          popover.doClose()
        }
        
        if (isArray(popover)) {
          popover.forEach(item => {
            item.doClose()
          })
        }
        
      }
      this.isAIAnswerLoading = false
    },
    onBizChatBarLoadingHandler() {
      this.isAIAnswerLoading = true
    },
    onUseBizChatBar(content) {
      EventBus.$emit('setHtml', content);
      this.closeAllAIAnswerPopover()
    },
    onSendBizChatBar(content) {
      
      EventBus.$emit('setHtml', content);
      EventBus.$emit('setIsEmpty', !content);
      
      setTimeout(() => {
        EventBus.$emit('sendMsg');
      }, 100)
      
      this.closeAllAIAnswerPopover()
      
    },
    watchMsgListHandler(messageList, oldMessageList) {
      this.watchMsgListAIAutoReply(messageList, oldMessageList)
    },
    watchMsgListAIAutoReply(messageList, oldMessageList) {
      
      if (!this.isAutoAIReply) {
        console.log('未开启AI自动回复, 不进行自动回复')
        return
      }
      
      if (!this.aiRobotId || !this.aiRobotAppId) {
        console.log('未配置AI机器人ID或者APPID, 不进行自动回复')
        return
      }
      
      if (!this.isHaveAIGray) {
        console.log('未开启AI灰度, 不进行自动回复')
        return
      }
      
      // if (!this.isSameConversation) {
      //   console.log('会话切换, 不进行自动回复')
      //   return
      // }
      
      if (isEmpty(oldMessageList)) {
        console.log('没有旧消息, 不进行自动回复')
        return
      }
      
      if (isEmpty(messageList)) {
        console.log('没有新消息, 不进行自动回复')
        return
      }
      
      console.log('开始自动回复')
      
      // 获取最后一条消息
      const lastMessageIndex = messageList.length - 1
      const lastMessage = messageList[lastMessageIndex]
      // 是否是客户消息
      const isCustomerMessage = lastMessage.sendType == 2
      // 是否是文本消息
      const isTextMessage = lastMessage.messageType == 'txt'
      
      // 如果是客户消息并且是文本消息
      if (!isCustomerMessage || !isTextMessage) {
        console.log('最后一条消息不是客户文本消息, 不进行自动回复')
        return
      }
      
      this.watchMsgListAIAutoReplyImpl(messageList)
      
    },
    watchMsgListAIAutoReplyImpl(messageList) {
      const lastMessageIndex = messageList.length - 1
      this.onAIAnswerBarShow(lastMessageIndex)
    },
    async onAIAnswerBarShow(index) {
      try {
        this.currentAIAnswerIndex = index
        // 清除其他的AI回答请求
        this.closeAllAIAnswerRequest()
        // 关闭其他的AI回答弹窗
        this.closeAllAIAnswerBar()
      } catch (error) {
        console.error(error)
      }
      // 显示当前AI回答弹窗
      this.showAIAnswerBar(index)
      
      await this.$nextTick()

      // 获取当前AI回答聊天框
      this.showBizChatBar(index)
      
      await this.$nextTick()
      
      // 滚动显示到当前AI回答
      // this.scrollToCurrentAIAnswer(index)
    },
    closeAllAIAnswerBar() {
      // 关闭其他的AI回答弹窗
      this.msgList.forEach((item, index) => {
        this.$set(item, 'showAIAnswerBar', false)
      })
    },
    showAIAnswerBar(index) {
      const item = this.msgList[index]
      this.$set(item, 'showAIAnswerBar', true)
    },
    onScrollHandler: _.debounce(function() {
      this.onScrollHandlerImpl();
    }, 300),
    onScrollHandlerImpl() {
      this.msgList.forEach((item, index) => {
        
        const refName = 'BizChatBar' + index
        const chatBar = this.$refs[refName]
        
        if (isObject(chatBar)) {
          chatBar.outsideClearScrollInterval()
        }
        
        if (isArray(chatBar)) {
          chatBar.forEach(item => {
            item.outsideClearScrollInterval()
          })
        }
        
      })
    }
  },
  filters: {
    formatDate(value) {
      return formatDate(value, 'YYYY-MM-DD HH:mm:ss');
    },
    InitializationTime(value) {
      if (typeof value === 'string') {
        let time = value.slice(0, 19);
        return (
          safeNewDate(time).getTime()
          + safeNewDate().getTimezoneOffset() * 60 * 1000 * -1
        );
      }
      return value;
    },
  },
};
</script>

<style scoped lang='scss'>
.messagebox-container {
  flex: 1;
  max-height: 100%;
  overflow-y: auto;
  .message-content {
    padding: 16px 16px 10px;
  }
  .iconfont-wrap {
    font-size: 12px;
    color: #262626;
    i {
      color: $color-primary-light-6;
    }
    height: 30px;
    text-align: center;
    line-height: 30px;
  }
  .chat-content {
    padding-top: 20px;
    img {
      width: 36px;
      height: 36px;
    }
    font-size: 14px;
    .info {
      display: flex;
      flex-wrap: wrap;
      &:hover{
        .more-edit{
          display: block;
        }
      }
      .record-item-wrap {
        display: flex;
        flex-direction: column;
        max-width: 90%;
      }
      .item-name{
        // width: 100%;
        max-width: 150px;
        overflow: hidden;
        text-align: left;
        font-size: 12px;
        padding:0 0 2px 10px;
        color: #bfbfbf;
        @include text-ellipsis();
      }
      .item-content-row {
        display: flex;
        justify-content: flex-start;
        position:relative;
        max-width: 100%;
      }
      .info-content {
        max-width: 300px;
        margin-left: 8px;
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 0 8px 8px 8px;
        word-wrap: break-word;
        color: #595959;
        a {
          color: $color-primary-light-6 !important;
        }
        &-txt{
          white-space: pre-wrap;
        }
      }
    }
    .info-time {
      margin-left: 44px;
      font-size: 12px;
      margin-top: 5px;
      color: #bfbfbf;
    }
    .more-edit {
      align-self: flex-end;
      font-size: 12px;
      color: #bfbfbf;
      margin-left: 4px;
      position: absolute;
      left:-20px;
      display: none;
    }
    .info-status {
      align-self: flex-end;
      font-size: 12px;
      color: #bfbfbf;
      margin-left: 4px;
    }
    .word-my {
      .info {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        .item-name{
          text-align: right;
          padding:0 10px 2px 0;
        }
        .info-status,.more-edit {
          margin-right: 4px;
        }
        .record-item-wrap {
          align-items: flex-end;
        }
        .item-content-row {
          display: flex;
          flex-direction: row-reverse;
        }
        .info-content,.file-content {
          margin: 0 8px 0 0;
          background: $color-primary-light-1;
          border: 1px solid rgba(0, 209, 178, 0.32);
          border-radius: 8px 0 8px 8px;
          color: #595959;
        }
      }
      .info-time {
        text-align: right;
        margin-right: 44px;
      }
    }
    .msg-img {
      width: 90px;
      height: 120px;
      margin-right: 10px;
      object-fit: contain;
      margin-left: 10px;
      border: 1px solid #e8e8e8;
    }
    .voice {
      display: none;
      height: 35px;
      width: 35px;
      background: #f5f5f5;
      margin-left: 10px;
    }
    .voice_bg {
      background: url()
        right 0 no-repeat;
      width: 30px;
      height: 30px;
      background-size: 400%;
    }
  }
  .wechat-tip {
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: #999;
    text-align: center;
  }
  .default {
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .default-img {
      img {
        width: 160px;
        height: 160px;
      }
    }
    .default-msg {
      margin-top: 8px;
      color: $text-color-regular;
    }
  }
}

.message-ai-answer {
  cursor: pointer;
  color: #8C8C8C;
  font-size: 12px;
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  background: #F5F8FA;
  width: 62px;
  border-radius: 8px;
  position: relative;
  top: 6px;
  &:hover {
    background: #F0F2F5;
  }
}
</style>

<style lang="scss">
.message-ai-answer-popper {
  max-width: 1200px;
  min-width: 300px;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  margin-top: 30px !important;
  left: 330px !important;
  .popper__arrow {
    display: none;
    &::after {
      border-bottom-color: #F0F2F5 !important;
    }
  }
}
.message-item-ai-answer-bar {
  margin-top: 4px;
}

.message-ai-answer-button {
  // &:hover {
  //   color: $color-primary;
  // }
  span {
    position: relative;
    top: 1px;
  }
  img {
    width: 18px !important;
    height: 18px !important;
  }
}
</style>